<div ng-controller="DemoCtrl" ng-cloak layout="column" layout-margin  ng-cloak>
    <p>The simplest way to display a single SVG icon is by referencing it by URL:</p>
    <p>
        <md-icon md-svg-src="{{ insertDriveIconURL }}"
                 aria-label="Insert Drive Icon">
        </md-icon>
    </p>

    <p>Style the icon size and color with CSS:</p>
    <p>
      <md-icon md-svg-src="img/icons/cake.svg"            class="s24" aria-label="Cake"    ></md-icon>
      <md-icon md-svg-src="{{ getAndroid() }}"            class="s36" aria-label="Android "></md-icon>
      <md-icon md-svg-src="img/icons/addShoppingCart.svg" class="s48" aria-label="Cart"    ></md-icon>
    </p>

    <p>Use data URLs (base64 or un-encoded):</p>
    <p>
      <md-icon
        md-svg-src=""
        class="s24"
        aria-label="Cake">
      </md-icon>

      <md-icon
        md-svg-src="data:image/svg+xml;base64,{{ getAndroidEncoded() }}"
        class="s36"
        aria-label="Android">
      </md-icon>

      <!-- un-encoded -->
      <md-icon
        md-svg-src='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g id="add-shopping-cart"><path d="M11 9h2V6h3V4h-3V1h-2v3H8v2h3v3zm-4 9c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zm10 0c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2zm-9.83-3.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.86-7.01L19.42 4h-.01l-1.1 2-2.76 5H8.53l-.13-.27L6.16 6l-.95-2-.94-2H1v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.13 0-.25-.11-.25-.25z"/></g></svg>'
        class="s48"
        aria-label="Cart">
      </md-icon>
    </p>
</div>

